<template>
  <div class="echartsfrom">
    <div class="left">
      <div class="header">
        <span>24小时推送时效性统计分析</span>
      </div>
      <div class="ech">
        <div id="myChart" :style="{width: '565px', height: '300px'}"></div>
      </div>
    </div> 

    <div class="right">
      <div class="header">
        <span></span>
        <span>30分钟以上任务详情列表</span>
      </div>
      <table action  bordercolor="#bfbfbf">
        <tr>
          <td>7:00-7:40</td>
          <td>7:50-8:30</td>
          <td>7:50-8:30</td>
          <td>7:50-8:30</td>
          <td>7:50-8:30</td>
          <td>7:50-8:30</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
         <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
         <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  //生命周期 - 创建完成
  created() {},

  //DOM挂载完毕
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "2015", "2016", "2017", "2018", "2019"],
          source: [
            {
              product: "6-2",
              "2015": 43.3,
              "2016": 85.8,
              "2017": 93.7,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-3",
              "2015": 43.3,
              "2016": 85.8,
              "2017": 93.7,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-4",
              "2015": 114,
              "2016": 65.2,
              "2017": 82.5,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-5",
              "2015": 72.4,
              "2016": 53.9,
              "2017": 39.1,
              "2018": 85.8,
              "2019": 85.8
            },
            {
              product: "6-6",
              "2015": 72.4,
              "2016": 53.9,
              "2017": 39.1,
              "2018": 85.8,
              "2019": 85.8
            }
          ]
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" }
        ]
      });
    }
  }
};
</script>

<style lang='less' scoped>
.echartsfrom {
  background-color: #fff;
  padding: 0 40px 0px 40px;
  display: flex;
  // box-shadow: 0 3px 2px #ccc;
  .left {
    flex: 1;
    .header {
      height: 62px;
      display: flex;
      align-items: center;
      span {
        border-radius: 5px;
        color: #fff;
        padding: 5px 15px;
        background-image: linear-gradient(90deg, #00a7f0 0%, #0adcc3 100%);
      }
    }

    .ech {
      #myChart {
      }
    }
  }

  .right {
    border-left: 0.5px solid #ddd;
    padding: 10px;
    flex: 1;
    .header {
      height: 62px;
      display: flex;
      align-items: center;
      span {
        &:nth-of-type(1) {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #03ddb6;
        }
        &:nth-of-type(2) {
          font-size: 14px;
          margin-left: 10px;
        }
      }
    }

    table {
      border-collapse: collapse;
      width: 100%;
      
      tr {
          width: 100%;
        td {
          width: 100px;
          height: 36px;
          line-height: 36px;
          border: 1px solid #bfbfbf;
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
}
</style>